<template>
  <div class="article-detail-container">
    <div class="article-detail" v-if="article">
      <div class="article-header">
        <h1 class="article-title">{{ article.title }}</h1>
        
        <div class="article-meta">
          <div class="meta-item">
            <i class="icon-user"></i>
            <span>{{ article.author }}</span>
          </div>
          <div class="meta-item">
            <i class="icon-calendar"></i>
            <span>{{ formatDate(article.createTime) }}</span>
          </div>
          <div class="meta-item">
            <i class="icon-eye"></i>
            <span>{{ article.viewCount || 0 }} 次阅读</span>
          </div>
          <div class="meta-item" v-if="article.categoryId">
            <i class="icon-category"></i>
            <span>{{ getCategoryName(article.categoryId) }}</span>
          </div>
          <div class="meta-item" v-if="article.status !== undefined">
            <i class="icon-status" :class="{'published': article.status === 1, 'draft': article.status === 0}"></i>
            <span>{{ article.status === 1 ? '已发布' : '草稿' }}</span>
          </div>
        </div>
      </div>
      
      <div class="article-cover" v-if="article.coverImage">
        <img :src="getStaticUrl(article.coverImage)" :alt="article.title">
      </div>
      
      <div class="article-content" ref="contentRef"></div>
      
      <div class="article-footer">
        <div class="article-tags" v-if="article.tags && article.tags.length">
          <span class="tag" v-for="tag in article.tags" :key="tag">{{ tag }}</span>
        </div>
        
        <div class="article-actions">
          <button class="action-button" @click="goBack">
            <i class="icon-back"></i> 返回
          </button>
          <button class="action-button" @click="shareArticle">
            <i class="icon-share"></i> 分享
          </button>
        </div>
      </div>
      
      <!-- 添加评论区 -->
      <div class="comments-section">
        <h3 class="comments-title">
          <i class="icon-comments"></i> 评论 ({{ comments.length }})
        </h3>
        
        <!-- 评论输入框 -->
        <div class="comment-form" v-if="userStore.isLoggedIn">
          <div class="comment-form-header">
            <img :src="getStaticUrl(userStore.userInfo?.avatar)" alt="用户头像" class="user-avatar">
            <span class="user-name">{{ userStore.userInfo?.username || '用户' }}</span>
          </div>
          
          <div class="comment-input-wrapper">
            <a-textarea 
              v-model:value="commentContent" 
              :placeholder="replyToComment ? `回复 @${replyToUser.username}` : '发表你的评论...'" 
              :rows="3"
              :maxlength="500"
              show-count
            />
            
            <div class="comment-toolbar">
              <div class="emoji-picker">
                <a-popover 
                  placement="bottomLeft" 
                  trigger="click"
                  :overlayStyle="{ width: '320px' }"
                >
                  <template #content>
                    <div class="emoji-container">
                      <span 
                        v-for="emoji in emojiList" 
                        :key="emoji" 
                        class="emoji-item"
                        @click="insertEmoji(emoji)"
                      >
                        {{ emoji }}
                      </span>
                    </div>
                  </template>
                  <a-button type="text" class="emoji-btn">
                    <i class="icon-emoji"></i> 表情
                  </a-button>
                </a-popover>
              </div>
              
              <div class="comment-actions">
                <a-button v-if="replyToComment" @click="cancelReply" class="cancel-reply">取消回复</a-button>
                <a-button type="primary" @click="submitComment" :loading="submitting">发表评论</a-button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="login-to-comment" v-else>
          <p>请 <a @click="showLoginModal">登录</a> 后发表评论</p>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list" v-if="comments.length > 0">
          <div 
            v-for="comment in comments" 
            :key="comment.id" 
            class="comment-item"
            :id="`comment-${comment.id}`"
            :class="{ 'highlighted-comment': highlightedCommentId === comment.id }"
          >
            <div class="comment-avatar">
              <img :src="getStaticUrl(comment.avatar)" alt="用户头像">
            </div>
            
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.username }}</span>
                <span class="comment-time">{{ formatCommentTime(comment.createTime) }}</span>
              </div>
              
              <div class="comment-text" v-html="formatCommentContent(comment.content)"></div>
              
              <div class="comment-actions">
                <a @click="handleReply(comment)" class="action-link">
                  <i class="icon-reply"></i> 回复
                </a>
                <a v-if="canDelete(comment)" @click="deleteComment(comment.id)" class="action-link">
                  <i class="icon-delete"></i> 删除
                </a>
              </div>
              
              <!-- 二级评论 -->
              <div class="replies" v-if="comment.children && comment.children.length > 0">
                <div 
                  v-for="reply in comment.children" 
                  :key="reply.id" 
                  class="reply-item"
                  :id="`comment-${reply.id}`"
                  :class="{ 'highlighted-comment': highlightedCommentId === reply.id }"
                >
                  <div class="reply-avatar">
                    <img :src="getStaticUrl(reply.avatar)" alt="用户头像">
                  </div>
                  
                  <div class="reply-content">
                    <div class="reply-header">
                      <span class="reply-author">{{ reply.username }}</span>
                      <span class="reply-time">{{ formatCommentTime(reply.createTime) }}</span>
                    </div>
                    
                    <div class="reply-text" v-html="formatCommentContent(reply.content)"></div>
                    
                    <div class="reply-actions">
                      <a @click="handleReply(reply, comment.id)" class="action-link">
                        <i class="icon-reply"></i> 回复
                      </a>
                      <a v-if="canDelete(reply)" @click="deleteComment(reply.id)" class="action-link">
                        <i class="icon-delete"></i> 删除
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="no-comments" v-else>
          <p>暂无评论，快来发表第一条评论吧！</p>
        </div>
      </div>
    </div>
    
    <div v-else class="loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    
    <div class="reading-progress-container">
      <div class="reading-progress" :style="{ width: readingProgress + '%' }"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, inject, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useArticleStore } from '@/stores/article';
import { useCategoryStore } from '@/stores/category';
import { useUserStore } from '@/stores/user';
import { message } from 'ant-design-vue';
import { getComments, addComment, deleteComment as apiDeleteComment } from '@/api/comment';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import CommentList from '@/components/CommentList.vue';
import { getStaticUrl } from '@/utils/url';
const route = useRoute();
const router = useRouter();
const articleStore = useArticleStore();
const categoryStore = useCategoryStore();
const userStore = useUserStore();
const showLoginModal = inject('showLoginModal');
const contentRef = ref(null);

const article = ref(null);
const readingProgress = ref(0);
const comments = ref([]);
const commentContent = ref('');
const replyToComment = ref(null);
const replyToUser = ref(null);
const parentId = ref(null);
const submitting = ref(false);
const highlightedCommentId = ref(null);

// 表情列表
const emojiList = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
  '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
  '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
  '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
  '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
  '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯'
];

onMounted(async () => {
  try {
    await fetchArticle();
    
    // 如果分类还没加载，先加载分类
    if (categoryStore.categories.length === 0) {
      await categoryStore.fetchCategories();
    }
    
    // 添加滚动监听器来更新阅读进度
    window.addEventListener('scroll', updateReadingProgress);
    
    // 等待DOM更新后处理代码块
    await nextTick();
    if (contentRef.value) {
      contentRef.value.innerHTML = article.value.content;
      processCodeBlocks();
    }
  } catch (error) {
    console.error('获取文章详情失败', error);
  }
});

onUnmounted(() => {
  window.removeEventListener('scroll', updateReadingProgress);
});

const updateReadingProgress = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
  
  // 计算阅读进度百分比
  const scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;
  readingProgress.value = Math.min(scrolled, 100);
};

const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  });
};

const getCategoryName = (categoryId) => {
  const category = categoryStore.categories.find(c => c.id === categoryId);
  return category ? category.name : '';
};

const goBack = () => {
  router.back();
};

const shareArticle = () => {
  if (navigator.share) {
    navigator.share({
      title: article.value.title,
      text: article.value.summary,
      url: window.location.href
    }).catch(err => {
      console.error('分享失败:', err);
    });
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
      .then(() => alert('链接已复制到剪贴板'))
      .catch(err => console.error('复制失败:', err));
  }
};

// 加载评论
const loadComments = async () => {
  try {
    const id = parseInt(route.params.id as string);
    const res = await getComments(id);
    comments.value = res;
  } catch (error) {
    console.error('获取评论失败', error);
  }
};

// 提交评论
const submitComment = async () => {
  if (!userStore.isLoggedIn) {
    message.warning('请先登录后再评论');
    return;
  }
  
  if (!commentContent.value.trim()) {
    message.warning('评论内容不能为空');
    return;
  }
  
  try {
    submitting.value = true;
    const articleId = parseInt(route.params.id as string);
    
    const commentData = {
      articleId,
      content: commentContent.value,
      parentId: parentId.value || 0,
      replyToUserId: replyToUser.value?.userId || 0
    };
    
    await addComment(commentData);
    message.success('评论发表成功');
    
    // 重新加载评论
    await loadComments();
    
    // 清空评论框
    commentContent.value = '';
    replyToComment.value = null;
    replyToUser.value = null;
    parentId.value = null;
  } catch (error) {
    message.error('评论发表失败');
    console.error('评论发表失败', error);
  } finally {
    submitting.value = false;
  }
};

// 处理回复
const handleReply = (comment, pId = null) => {
  replyToComment.value = {
    id: comment.userId,
    username: comment.username
  };
  replyToUser.value = comment;
  parentId.value = pId || comment.id;
  
  // 滚动到评论框
  setTimeout(() => {
    document.querySelector('.comment-form')?.scrollIntoView({ behavior: 'smooth' });
  }, 100);
};

// 取消回复
const cancelReply = () => {
  replyToComment.value = null;
  replyToUser.value = null;
  parentId.value = null;
};

// 删除评论
const deleteComment = async (commentId) => {
  try {
    await apiDeleteComment(commentId);
    message.success('评论删除成功');
    await loadComments();
  } catch (error) {
    message.error('评论删除失败');
    console.error('评论删除失败', error);
  }
};

// 判断是否可以删除评论
const canDelete = (comment) => {
  return userStore.isLoggedIn && 
    (userStore.userInfo?.id === comment.userId || userStore.userInfo?.role === 'admin');
};

// 插入表情
const insertEmoji = (emoji) => {
  commentContent.value += emoji;
};

// 格式化评论内容，处理@用户和表情
const formatCommentContent = (content) => {
  if (!content) return '';
  
  // 处理@用户
  let formattedContent = content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>');
  
  // 处理换行
  formattedContent = formattedContent.replace(/\n/g, '<br>');
  
  return formattedContent;
};

// 格式化评论时间
const formatCommentTime = (dateStr) => {
  if (!dateStr) return '';
  
  const now = new Date();
  const commentDate = new Date(dateStr);
  const diff = now.getTime() - commentDate.getTime();
  
  // 小于1分钟
  if (diff < 60 * 1000) {
    return '刚刚';
  }
  
  // 小于1小时
  if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`;
  }
  
  // 小于24小时
  if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
  }
  
  // 小于30天
  if (diff < 30 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`;
  }
  
  // 大于30天，显示具体日期
  return commentDate.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  });
};

const processCodeBlocks = () => {
  if (!contentRef.value) return;
  
  // 初始化代码高亮
  hljs.configure({
    languages: ['javascript', 'typescript', 'python', 'java', 'html', 'css', 'bash', 'json', 'sql'],
    ignoreUnescapedHTML: true
  });
  
  // 查找所有代码块容器
  const codeBlockContainers = contentRef.value.querySelectorAll('.ql-code-block-container');
  codeBlockContainers.forEach((container) => {
    // 移除选择器和不必要的元素
    const selectElement = container.querySelector('.ql-ui');
    if (selectElement) {
      selectElement.style.display = 'none';
    }
    
    // 如果已经处理过，跳过
    if (container.previousElementSibling?.className === 'code-control-bar') return;
    
    // 添加苹果风格类
    container.classList.add('apple-style-code');
    
    // 获取语言
    let language = 'code';
    const codeBlocks = container.querySelectorAll('.ql-code-block');
    if (codeBlocks.length > 0) {
      const dataLanguage = codeBlocks[0].getAttribute('data-language');
      if (dataLanguage) {
        language = dataLanguage;
      }
    }
    
    // 创建控制栏
    const controlBar = document.createElement('div');
    controlBar.className = 'code-control-bar';
    
    // 语言标签
    const langLabel = document.createElement('span');
    langLabel.className = 'code-lang-label';
    langLabel.textContent = language.toUpperCase();
    controlBar.appendChild(langLabel);
    
    // 复制按钮
    const copyBtn = document.createElement('button');
    copyBtn.className = 'code-copy-btn';
    copyBtn.textContent = '复制代码';
    copyBtn.onclick = function(e) {
      e.preventDefault();
      e.stopPropagation();
      const codeContent = Array.from(codeBlocks)
        .map(block => block.textContent || '')
        .join('\n');
      navigator.clipboard.writeText(codeContent)
        .then(() => {
          copyBtn.textContent = '已复制!';
          setTimeout(() => {
            copyBtn.textContent = '复制代码';
          }, 2000);
        })
        .catch(err => {
          console.error('复制失败:', err);
        });
    };
    controlBar.appendChild(copyBtn);
    
    // 将控制栏插入到代码块前
    container.parentNode?.insertBefore(controlBar, container);
    
    // 应用代码高亮到每个代码行
    codeBlocks.forEach(block => {
      try {
        // 确保代码块没有额外的内部标签并正确转义HTML
        const originalCode = block.textContent || '';
        
        // 清空并重新设置内容，以确保HTML被正确转义
        block.textContent = originalCode;
        
        // 应用高亮
        hljs.highlightElement(block);
      } catch (e) {
        console.error('代码高亮错误:', e);
      }
    });
  });
};

// 获取文章数据
const fetchArticle = async () => {
  try {
    const id = parseInt(route.params.id as string);
    const res = await articleStore.getArticleDetail(id);
    article.value = res;
    
    // 获取评论
    await fetchComments();
    
    // 处理评论高亮
    handleCommentHighlight();
  } catch (error) {
    console.error('获取文章失败:', error);
  }
};

// 获取评论列表
const fetchComments = async () => {
  try {
    const articleId = parseInt(route.params.id as string);
    const res = await getComments(articleId);
    comments.value = res || [];
    
    // 评论加载完成后处理评论高亮
    handleCommentHighlight();
  } catch (error) {
    console.error('获取评论失败:', error);
  }
};

// 处理评论高亮
const handleCommentHighlight = () => {
  if (route.query.commentId) {
    const commentId = parseInt(route.query.commentId as string);
    console.log('准备高亮评论:', commentId);
    highlightedCommentId.value = commentId;
    
    // 等待DOM更新后滚动到评论位置
    nextTick(() => {
      setTimeout(() => {
        const commentElement = document.getElementById(`comment-${commentId}`);
        console.log('查找评论元素:', `comment-${commentId}`, commentElement ? '找到' : '未找到');
        
        if (commentElement) {
          // 滚动到评论位置
          commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
          console.log('滚动到评论位置');
        } else {
          console.error(`找不到评论元素: comment-${commentId}`);
        }
      }, 500);
    });
  }
};

// 监听路由变化，重新加载文章数据
watch(() => route.params.id, () => {
  fetchArticle();
});

// 监听查询参数变化，处理评论高亮
watch(() => route.query.commentId, () => {
  if (route.query.commentId) {
    handleCommentHighlight();
  } else {
    highlightedCommentId.value = null;
  }
});
</script>

<style>
::selection {
    background-color: #FF9EB5; /* 哔哩哔哩可爱粉的颜色代码 */
    color: white; /* 可选：更改选中文本的颜色 */
}
.article-detail-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.article-detail {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.article-header {
  margin-bottom: 25px;
}

.article-title {
  font-size: 2.2rem;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #666;
  font-size: 0.9rem;
}

.meta-item {
  display: flex;
  align-items: center;
}

.icon-calendar::before {
  content: '📅';
  margin-right: 5px;
}

.icon-eye::before {
  content: '👁️';
  margin-right: 5px;
}

.icon-category::before {
  content: '📂';
  margin-right: 5px;
}

.icon-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.icon-status.published {
  background-color: #52c41a;
}

.icon-status.draft {
  background-color: #faad14;
}

.article-cover {
  margin: 20px 0 30px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 400px;
}

.article-cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.article-content {
  line-height: 1.8;
  color: #333;
  font-size: 1.05rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* 处理文章内容中的图片溢出问题 */
.article-content :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0;
}

/* 处理文章内容中的表格溢出问题 */
.article-content :deep(table) {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  overflow-x: auto;
  display: block;
}

.article-content :deep(th),
.article-content :deep(td) {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

/* 处理文章内容中的代码块溢出问题 */
.article-content :deep(pre) {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 20px 0;
  white-space: pre-wrap;
}

.article-content :deep(code) {
  background-color: #f5f5f5;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
  word-break: break-all;
}

/* 处理文章内容中的引用溢出问题 */
.article-content :deep(blockquote) {
  border-left: 4px solid #42b983;
  padding: 10px 15px;
  color: #666;
  background-color: #f8f8f8;
  margin: 20px 0;
  overflow-wrap: break-word;
}

/* 处理文章内容中的iframe溢出问题 */
.article-content :deep(iframe) {
  max-width: 100%;
  border: none;
  margin: 20px 0;
}

.article-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  background-color: #f0f0f0;
  color: #666;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
}

.article-actions {
  display: flex;
  gap: 10px;
}

.action-button {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.action-button:hover {
  background-color: #e0e0e0;
}

.icon-back::before {
  content: '←';
  margin-right: 5px;
}

.icon-share::before {
  content: '🔗';
  margin-right: 5px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #42b983;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.reading-progress {
  height: 100%;
  background: linear-gradient(to right, #42b983, #64b5f6);
  width: 0%;
  transition: width 0.2s;
}

/* 评论区样式 */
.comments-section {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.comments-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.icon-comments::before {
  content: '💬';
  margin-right: 10px;
}

.comment-form {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.comment-form-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  border: 2px solid #f0f0f0;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.comment-input-wrapper {
  position: relative;
}

.comment-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.emoji-btn {
  display: flex;
  align-items: center;
  color: #666;
}

.icon-emoji::before {
  content: '😊';
  margin-right: 5px;
}

.emoji-container {
  display: flex;
  flex-wrap: wrap;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  font-size: 1.5rem;
  padding: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.emoji-item:hover {
  transform: scale(1.2);
}

.comment-actions {
  display: flex;
  gap: 10px;
}

.cancel-reply {
  color: #666;
}

.login-to-comment {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 30px;
}

.login-to-comment a {
  color: #42b983;
  cursor: pointer;
  font-weight: 500;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  display: flex;
  margin-bottom: 25px;
  position: relative;
}

.comment-item:target {
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  0% { background-color: rgba(66, 185, 131, 0.1); }
  100% { background-color: transparent; }
}

.comment-avatar {
  flex: 0 0 40px;
  margin-right: 15px;
}

.comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 0.8rem;
  color: #999;
}

.comment-text {
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
  word-break: break-word;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.action-link {
  color: #999;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.3s;
}

.action-link:hover {
  color: #42b983;
}

.icon-reply::before {
  content: '↩️';
  margin-right: 3px;
}

.icon-delete::before {
  content: '🗑️';
  margin-right: 3px;
}

.replies {
  margin-top: 15px;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 2px solid #f0f0f0;
}

.reply-item {
  display: flex;
  margin-bottom: 15px;
  position: relative;
}

.reply-item:target {
  animation: highlight 2s ease-out;
}

.reply-avatar {
  flex: 0 0 30px;
  margin-right: 10px;
}

.reply-avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.reply-author {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
}

.reply-time {
  font-size: 0.75rem;
  color: #999;
}

.reply-text {
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
  font-size: 0.95rem;
  word-break: break-word;
}

.reply-actions {
  display: flex;
  gap: 15px;
}

.mention {
  color: #1890ff;
  font-weight: 500;
}

.no-comments {
  text-align: center;
  padding: 30px;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .article-detail {
    padding: 20px;
  }
  
  .article-title {
    font-size: 1.8rem;
  }
  
  .article-meta {
    gap: 15px;
  }
  
  .article-footer {
    flex-direction: column;
    gap: 20px;
  }
  
  .article-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .comment-form {
    padding: 15px;
  }
  
  .comment-header, .reply-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .comment-time, .reply-time {
    margin-top: 5px;
  }
}

/* 苹果风格代码块样式优化 */
.ql-code-block-container.apple-style-code {
  position: relative;
  background-color: #282c34;
  color: #abb2bf;
  border-radius: 0 0 6px 6px;
  padding: 20px;
  margin: 0 0 20px 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
  border: 1px solid #1c1e25;
  border-top: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 隐藏Quill编辑器UI元素 */
.ql-code-block-container .ql-ui {
  display: none !important;
}

/* 代码行样式 */
.ql-code-block {
  white-space: pre;
  padding: 0;
  margin: 0 0 2px 0;
  font-family: inherit;
  line-height: 1.6;
  tab-size: 4;
  -moz-tab-size: 4;
}

/* 控制栏样式优化 */
.code-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #3a3f4b, #2f333d);
  border: 1px solid #1c1e25;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 36px;
  padding: 0 12px;
  color: #d7dae0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.code-lang-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  padding: 2px 6px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.code-copy-btn {
  background-color: rgba(255,255,255,0.1);
  border: none;
  border-radius: 4px;
  color: #d7dae0;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}


.code-copy-btn:hover {
  background-color: rgba(255,255,255,0.2);
  color: white;
}

.code-copy-btn:active {
  transform: translateY(1px);
}

/* 滚动条样式 */
.ql-code-block-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ql-code-block-container::-webkit-scrollbar-track {
  background: #21252b;
  border-radius: 4px;
}

.ql-code-block-container::-webkit-scrollbar-thumb {
  background: #4e5562;
  border-radius: 4px;
}

.ql-code-block-container::-webkit-scrollbar-thumb:hover {
  background: #5a6173;
}

/* 代码行间距 */
.ql-code-block + .ql-code-block {
  margin-top: 0;
}

.highlight-animation {
  animation: highlight-pulse 3s ease-in-out;
  border-left: 4px solid #1890ff !important;
}

@keyframes highlight-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(24, 144, 255, 0.15); }
}

/* 添加高亮样式 */
.highlighted-comment {
  background-color: rgba(24, 144, 255, 0.05) !important;
  border-left: 3px solid #1890ff !important;
  animation: highlight-pulse 2s ease-in-out !important;
}

@keyframes highlight-pulse {
  0%, 100% { background-color: rgba(24, 144, 255, 0.05); }
  50% { background-color: rgba(24, 144, 255, 0.2); }
}
</style> 